<template>
  <div style="display: flex; flex: 1; height: 100%">
    <div class="container container-left">
      <el-scrollbar>
        <div class="message-title">基础信息</div>
        <div>品牌：北京同仁堂</div>
        <div>产品名：茯苓八珍糕</div>
        <div>产品包装：独立锁件包装</div>
        <div>日常价：一斤50块</div>
        <div>直播间：600克15快9</div>
        <div>赠品：无</div>
        <div>营销节点：新号开播</div>
        <div>快递物流：三通一达</div>
        <div>发货时间：48小时</div>

        <div class="message-title">产品卖点</div>
        <div>颜值：白色块状糕点</div>
        <div>口感：软软糯糯的，咸香口味，淡淡的草本香</div>
        <div>
          材料成分：茯苓、芡实、莲子、薏米、山楂山药，白扁豆、麦芽、葵花子仁、南瓜子仁
        </div>
        <div>其他：源头厂家、无添加、无蔗糖、纯手工、</div>

        <div class="message-title">功效：</div>
        <div>使用人群：老人孕妈妈、尿高的、脂高的、压高的都可以</div>
        <div>使用场景：零食、早餐代餐</div>
        <div class="message-title">话术风格</div>
        <el-radio-group v-model="radio">
          <el-radio :label="1">李佳奇</el-radio>
          <el-radio :label="2">周年庆</el-radio>
          <el-radio :label="3">新号开播</el-radio>
        </el-radio-group>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="syncHTML">提交</el-button>
        </div>

        <!--  <el-radio-group v-model="radio">
          <el-radio :label="1">周年庆</el-radio>
          <el-radio :label="2">周年庆</el-radio>
          <el-radio :label="3">新号开播</el-radio>
          <el-radio :label="4">新号开播</el-radio>
          <el-radio :label="5">双11</el-radio>
          <el-radio :label="6">双11</el-radio>
        </el-radio-group> 
        <p>快递物流：XXXX</p>
        <p>发货时间：XXXX</p>
        <p class="message-title">产品卖点</p>
        <p>产品包装：XXXX</p>
        <p>产品颜值：XXXX</p>
        <p>基础口感</p>
        <p>材料成分：XXXX</p>
        <p>其他：XXXX</p>
        <p class="message-title">功效</p>
        <p>适合人群:XXXXX</p>
        <p>功效类型：XXXX</p>
        <p class="message-title">话术风格</p>
        <el-radio-group v-model="radio">
          <el-radio :label="1">李佳奇</el-radio>
          <el-radio :label="2">周年庆</el-radio>
          <el-radio :label="3">新号开播</el-radio>
          <el-radio :label="4">新号开播</el-radio>
          <el-radio :label="5">双11</el-radio>
          <el-radio :label="6">双11</el-radio>
        </el-radio-group>
        <p class="message-title">附件信息</p>

        <div >
          <el-input v-model="textarea" maxlength="500" placeholder="Please input" show-word-limit type="textarea" />
        </div>
        -->
      </el-scrollbar>
    </div>
    <div class="container container-right" style="flex: 2">
      <el-scrollbar>
        <div class="btn">
          <el-space>
            <el-button type="primary">直播建议</el-button>
            <el-button type="primary">违禁词预警</el-button>
          </el-space>
        </div>
        <div>
          <h1 style="color: red">橙小妹八珍糕</h1>
          <p>
            <span>欢迎家人们来到直播间，新号开播只赚人气不</span>
            <span style="background-color: red">赚钱</span>
            <span
              >，优惠多多，福利多多，我们这个茯苓八珍糕传统手工轻工工艺制作是能够保持住原有的品质口感，还有营养价值，富含丰富的一些蛋白质、膳食纤维等一些微量元素，钙铁磷钾维c都是相当丰富的。</span
            >
          </p>
          <p>
            <span>那么我们在吃这个八珍糕的同时，享受美味的同时，</span>
            <span style="color: red"
              >还想给自己的身体和家里面的人身体补充上一些身体所需要的元素怎么办？最主要的还是没有额外增加过任何的食品添加剂，没有香精，没有色素0添加、0污染、0蔗糖、0白糖、0枫糖，糖高的、尿高的、脂高的、压高的都可以吃，我们平时重油重盐重糖的正在管理生长的年龄30已过的哥哥姐姐，孕妈妈哺乳期宝妈上到百岁老人，下到七八个月宝贝我们都可以放心吃我们的八珍糕，这是一款没有添加过任何高科技的一个健康食品，</span
            >
            <span
              >大米制作，大家都知道每天一一一天三顿都要吃的一个大米，然后增加了茯苓芡实，现在三伏天的时间，茯苓芡实莲子薏米这些东西我们可以多吃一一些，少吃荤腥少吃糖，多吃8珍糕，这个一包的话，这一小包是12克的，一小包的净含量12克，</span
            >
            <span style="color: red"
              >你们拿到手15块9毛钱是整整满满当当的一大箱50块600克的净含量，4块9毛钱，</span
            >
            <span
              >平常你们正常价格拿到手是要50多的，其实你们也可以到别人家去看一看，对不对？</span
            >
          </p>
          <p>
            <span>今天在主播的直播间15块9毛钱，你拿到的不是10块20块，</span>
            <span style="background-color: yellow"
              >是整整50块600克一斤二两</span
            >
            <span
              >，这种福利不是天天有亏本价格也不会天天上。所以如果说宝贝你今天能够拍到，不要等到明天很多宝贝会有疑问，为什么我家这么便宜，是不是过期的？是不是？通通都是新鲜食材现做现发，并且都是精心挑选的食材给到大家。</span
            >
          </p>
          <p>
            我们是线下供应链在线下做了20多年的一个供应链，正宗的源头厂家，我们也是第一次来到抖爸爸平台，今天第是第1周开播，那么这个价格给出去是有目的的，不是说白给的，我希望大家尝试过一次之后觉得好吃可以再回来回购的。
          </p>
          <p>
            <span
              >咱家的口感，您吃到你就会发现必定要食材好才能够做得出来，所以您可以放心去尝一尝试一试。毕竟我今天15块9毛钱价格，我是希望你能够回来回购的，如果是你尝试过这不好吃，你不回来回购，那么我这一单就是实打实的亏出去的。你平时可以放在包包里面带8个放办公室，当个上午茶下午茶放在包包里面，出门旅个游，探个亲带小朋友们遛个娃遛个小宠物，随时随地随心随享受。</span
            >
            <span style="color: orange"
              >三伏天乏力气虚体内湿气重，我们八珍糕具有除湿的功效，让你无湿一身轻。</span
            >
          </p>
          <p>
            你们拿到手宝贝可以自己猜一下来看一下，每一块都是新鲜的食材给到大家，真真实实的一个坚果做出来给大家，口感特别的松软，咬下去的第一口都是淡淡的咸香口味，松松的软软的糯糯的入口即化的那种，如果说宝贝你以前在别家拍过，感觉别人家的那种以前买过那种茯苓八珍糕，感觉口感比较硬的，咬不动嚼嚼不烂的。
          </p>
          <p>
            平时你们正常价格拿到要50多的，所以说今天这个福利不能错过，而且我们增加了8种珍贵食材茯苓、芡实、莲子、薏米、山楂山药，白扁豆、麦芽、葵花子仁、南瓜子仁，各位宝贝糖高尿高脂高都可以吃，50多包，总共重量是600克，拿到手一块就是一包，一块的净含量是12克的，两指宽一指厚的50块，总共增量是600克15块9毛钱一个，完全是快递费的价格。这是我先请您吃的，尝试过之后您觉得好请您再回来回购。
          </p>
        </div>
      </el-scrollbar>
      <!-- <div class="mgb20" ref="editor"></div> -->
      <!--  <el-button type="primary" @click="syncHTML">提交</el-button> -->
    </div>
  </div>
</template>

<script setup lang="ts" name="basetable">
import WangEditor from "wangeditor";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
const radio = ref(3);
const textarea = ref(1);
const textData = `<h1 style="color:red;">橙小妹八珍糕</h1>
  <p> 
    <span>欢迎家人们来到直播间，新号开播只赚人气不</>
    <span style="background-color:red;">赚钱</span>
    <span>，优惠多多，福利多多，我们这个茯苓八珍糕传统手工轻工工艺制作是能够保持住原有的品质口感，还有营养价值，富含丰富的一些蛋白质、膳食纤维等一些微量元素，钙铁磷钾维c都是相当丰富的。</span>
  </p>
  <p>
    <span>那么我们在吃这个八珍糕的同时，享受美味的同时，</span>
    <span style="color:red;">还想给自己的身体和家里面的人身体补充上一些身体所需要的元素怎么办？最主要的还是没有额外增加过任何的食品添加剂，没有香精，没有色素0添加、0污染、0蔗糖、0白糖、0枫糖，糖高的、尿高的、脂高的、压高的都可以吃，我们平时重油重盐重糖的正在管理生长的年龄30已过的哥哥姐姐，孕妈妈哺乳期宝妈上到百岁老人，下到七八个月宝贝我们都可以放心吃我们的八珍糕，这是一款没有添加过任何高科技的一个健康食品，</span>
    <span>大米制作，大家都知道每天一一一天三顿都要吃的一个大米，然后增加了茯苓芡实，现在三伏天的时间，茯苓芡实莲子薏米这些东西我们可以多吃一一些，少吃荤腥少吃糖，多吃8珍糕，这个一包的话，这一小包是12克的，一小包的净含量12克，</span>
    <span style="color:red;">你们拿到手15块9毛钱是整整满满当当的一大箱50块600克的净含量，4块9毛钱，</span>
    <span>平常你们正常价格拿到手是要50多的，其实你们也可以到别人家去看一看，对不对？</span>
  </p>
  <p>
    <span>今天在主播的直播间15块9毛钱，你拿到的不是10块20块，</span>
    <span style="background-color:yellow;">是整整50块600克一斤二两</span>
    <span>，这种福利不是天天有亏本价格也不会天天上。所以如果说宝贝你今天能够拍到，不要等到明天很多宝贝会有疑问，为什么我家这么便宜，是不是过期的？是不是？通通都是新鲜食材现做现发，并且都是精心挑选的食材给到大家。</span>
  </p>
  <p>
    我们是线下供应链在线下做了20多年的一个供应链，正宗的源头厂家，我们也是第一次来到抖爸爸平台，今天第是第1周开播，那么这个价格给出去是有目的的，不是说白给的，我希望大家尝试过一次之后觉得好吃可以再回来回购的。
  </p>
  <p>
    <span>咱家的口感，您吃到你就会发现必定要食材好才能够做得出来，所以您可以放心去尝一尝试一试。毕竟我今天15块9毛钱价格，我是希望你能够回来回购的，如果是你尝试过这不好吃，你不回来回购，那么我这一单就是实打实的亏出去的。你平时可以放在包包里面带8个放办公室，当个上午茶下午茶放在包包里面，出门旅个游，探个亲带小朋友们遛个娃遛个小宠物，随时随地随心随享受。</span>
    <span style="color:orange;">三伏天乏力气虚体内湿气重，我们八珍糕具有除湿的功效，让你无湿一身轻。</span>
    </p>
    <p>
      你们拿到手宝贝可以自己猜一下来看一下，每一块都是新鲜的食材给到大家，真真实实的一个坚果做出来给大家，口感特别的松软，咬下去的第一口都是淡淡的咸香口味，松松的软软的糯糯的入口即化的那种，如果说宝贝你以前在别家拍过，感觉别人家的那种以前买过那种茯苓八珍糕，感觉口感比较硬的，咬不动嚼嚼不烂的。
      </p>
      <p>
        平时你们正常价格拿到要50多的，所以说今天这个福利不能错过，而且我们增加了8种珍贵食材茯苓、芡实、莲子、薏米、山楂山药，白扁豆、麦芽、葵花子仁、南瓜子仁，各位宝贝糖高尿高脂高都可以吃，50多包，总共重量是600克，拿到手一块就是一包，一块的净含量是12克的，两指宽一指厚的50块，总共增量是600克15块9毛钱一个，完全是快递费的价格。这是我先请您吃的，尝试过之后您觉得好请您再回来回购。
  </p>
  `;
const editor = ref(null);
const content = reactive({
  html: "",
  text: "",
});
let instance: any;
onMounted(() => {
  /* instance = new WangEditor(editor.value);
  instance.config.zIndex = 1;
  instance.create();
  let eds = document.getElementsByClassName('w-e-text-container')
  eds[0].style = eds[0].style.cssText + 'height:500px'
  instance.txt.html(textData); */
});
onBeforeUnmount(() => {
  instance.destroy();
  instance = null;
});
const syncHTML = () => {
  content.html = instance.txt.html(textData);
  console.log(content.html);
};
</script>

<style lang="scss">
.container-left {
  flex-basis: 400px;
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.container-right {
  .btn {
    margin-bottom: 10px;
  }
}

.message-title {
  margin: 30px 0px 10px 0px;
  font-weight: 600;
}

.message-title:first-child {
  margin-top: 0px;
}
</style>
